import React from 'react'
import Store from './store'
import Actions from './actions'
const actions = new Actions()
const store = new Store()

class List extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      list: []
    }
    this.add = this.add.bind(this)
  }
  add() {
    actions.add(this.refs.nameInput.value)
  }
  componentDidMount() {
    // console.log('mount')
    actions.getList()
    store.on('change', data => {
      this.setState({list: data})
    })
  }

  render() {
    return <ul>
      {this.state.list.map(item => <li key={Math.ceil(Math.random() * 10000)}>{item}</li>)}
      <li>
        <input ref="nameInput"/>
        <button onClick={this.add}>add</button>
      </li>
    </ul>
  }
}

export default List